$(function () {
    //初始化form方法
    let form = layui.form

    //获取文章列表需要的数据
    let q = {
        pagenum: 1, // int 页码值
        pagesize: 2, // int 每页显示多少条数据
        cate_id: '', // string 文章分类的 Id
        state: '', // string 文章的状态， 可选值有： 已发布、 草稿
    }
    //文章类别渲染数据
    initArticleList()

    function initArticleList() {
        axios({
            url: '/my/article/list',
            method: 'get',
            params: q
        }).then(res => {
            //成功回调
            let htmlArr = []
            res.data.data.forEach(value => {
                htmlArr.push(`<tr>
                <td>${value.title}</td>
                <td>${value.cate_name}</td>
                <td>${value.pub_date}</td>
                <td>${value.state}</td>
                <td>
                    <button type="button" class="layui-btn layui-btn-xs">修改</button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                </td>
            </tr>`)
            })
            //empty()清除原来的元素，join('')字符串拼接
            $('tbody').empty().html(htmlArr.join(''))
            renderPage(res.data.total)
        })
    }


    //初始话文章分类
    initArtCateList()

    function initArtCateList() {
        axios({
            url: '/my/article/cates',
        }).then(res => {
            //成功回调
            let htmlArr = ['<option value="" >请选择文章类别</option>']
            res.data.data.forEach(v => {
                htmlArr.push(`<option value="${v.Id}" >${v.name}</option>`)
            })
            //渲染数据empty()删除原来的数据，join字符串拼接
            $('[name="cate_id"]').empty().html(htmlArr.join(''))
            form.render() //渲染动态新增的数据
        })
    }

    //form表单提交
    $('#form').on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $('[name="cate_id"]').val()
        q.state = $('[name="state"]').val()
        //修改后重新渲染数据
        initArticleList()
    })

    function renderPage(total) {
        let laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'paging', //选择器
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, //每一页显示的数据条数
            layout: ['count', 'prev', 'page', 'next', 'limit',], //自定义排版
            limits: [2, 5, 10, 15, 20], //分页可切换的数据
            curr: q.pagenum,//当前的页面值（默认是第一页）
            //实现分页切换功能
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                //首次不执行
                if (!first) {
                    //do something
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    //然后在渲染数据
                    initArticleList()
                }
            }

        })

    }




})